<script setup>

import Card from "@/components/Card.vue";
import {CollectionTag, Message, Notebook, Refresh, Select, ShoppingCartFull, User} from "@element-plus/icons-vue";
import {useStore} from "@/store";
import {computed, reactive, ref} from "vue";
import {accessHeader, get, post} from "@/net";
import {ElMessage} from "element-plus";
import axios from "axios";
import LightCard from "@/components/LightCard.vue";
import ConnectWallet from "@/components/NFT/ConnectWallet.vue";
import WalletState from "@/components/NFT/WalletState.vue";
import NFTCard from "@/components/NFT/NFTCard.vue";
import {market_address} from "@/config/contract";
import {getAllNFTs} from "@/contract/market";
import {getMetadata} from "@/contract/nft";
import router from "@/router";

const store = useStore()

//市场参数
const market = reactive({
  init:false,
  balance: 0,
  orders:[],
  data:[]
})
//出初始化
const init = async ()=>{
  market.orders = await getAllNFTs()
  /**
   * order{
   *   seller，
   *   tokenId，
   *   price
   * }
   */
  for(let i=0;i<market.orders.length;i++){
    market.data.push({
      tokenId:market.orders[i][1],
      metadata:await getMetadata(market.orders[i][1])
    })
  }
}
init()

</script>

<template>
  <div class="main">
    <transition name="el-zoom-in-top" mode="out-in">
      <div v-if="store.wallet.connected" class="market">
        <Card :icon="ShoppingCartFull" title="NFT交易市场" desc="你可以在这里出售你的NFT藏品,也可以购入心仪的NFT作品">
          <NFTCard class="nft" v-for="item in market.data" :key="item"
                   @click="router.push(`/index/nft/nft-detail/${item.tokenId}`)"
                   :title="item.metadata.title"
                   :desc="item.metadata.description"
                   :image="item.metadata.imageURL">
          </NFTCard>
        </Card>
      </div>
    </transition>
    <div class="other">
      <Card>
        <div style="font-weight: bold">
          <el-icon><CollectionTag/></el-icon>
          版块介绍
        </div>
        <el-divider style="margin: 10px"/>
        <div style="font-size: 14px;margin: 10px;color: grey;text-indent: 2em">
          <p>欢迎来到我们的NFT交易市场板块！在这里，您可以购入自己心仪的NFT艺术品。</p>
          <p>注意：链上任何操作不可回溯，请谨慎操作，出现其他任何问题请联系网站管理员：alan223！</p>
        </div>
      </Card>
      <div class="wallet-state">
        <wallet-state />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.main{
  display: flex;
  text-align: center;
  gap: 20px;
  max-width: 1000px;
  margin: 20px auto;
  .market {
    flex: 1;
    .nft{
      padding: 15px;
      transition: scale .3s;

      &:hover {
        scale: 1.015;
        cursor: pointer;
      }
    }
  }
  .other{
    max-width: 300px;
    .wallet-state{
    }
  }
}



</style>